<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules, UploadProps } from 'element-plus'

interface RuleForm {
  name: string
  type: string
  fileList: UploadProps['fileList']
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  type: '1',
  fileList: [],
})

const rules = reactive<FormRules<RuleForm>>({
  type: [
    {
      required: true,
      message: '请选择输入类型',
      trigger: 'change',
    },
  ],
  name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return true
}

const typeOptions = reactive([
  {
    label: '多组学',
    value: '1',
  },
  {
    label: '单细胞组学',
    value: '2',
  },
  {
    label: '空间组学',
    value: '3',
  },
])
</script>

<template>
  <div class="customized-services-container">
    <div class="common-banner">
      <img src="@/assets/images/square/app-market-banner.png" alt="" />
      <div class="content">
        <div class="common-w-box">
          <div class="txt-c">
            <div class="t1" style="text-align: left">定制个性化服务简介</div>
            <div class="des">
              顾问团提供了丰富的经验,企业可根据凭证调用企业自身的员工、客户数据进行数据分析,同时可使用AP与企业内部系统进行数据互通。
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 16px 0">
      <div class="common-w-box">
        <div class="cnb">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            status-icon
          >
            <el-form-item label="选择类型" prop="type">
              <el-radio-group v-model="ruleForm.type">
                <el-radio-button
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="个人上传照片" prop="fileList">
              <el-upload
                v-model:file-list="ruleForm.fileList"
                :show-file-list="false"
                action="#"
                multiple
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
              >
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="昵称" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入联系人"
                style="width: 40%"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                提交
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.customized-services-container {
  .cnb {
    padding: 30px 30px 30px 10px;
    background: #fff;
    border-radius: 4px;
  }
}
</style>
